<template>
  <view class="container flex-row" :style="{left}">
    <view class="item">
      <login-container :title="cancel ? '手机短信验证' : '更改手机号'" button-text="确定" :show-read="false" :text="cancel ? '为了防止恶意操作，已将短信验证码发送至' : '请通过短信验证，当前手机号'" @submit="changePhone">
        <view class="margin-top-40">
          <view v-for="(val,key) in part1List" :key="key" :class="{'margin-bottom-16':key===2}" class="input-box margin-bottom-56 flex-row align-center">
            <input
              v-model="part1Form[val.attr]"
              class="text-32 color-t1 flex-item"
              placeholder-class="color-t3"
              :type="val.type"
              :placeholder="val.placeholder"
              :maxlength="val.maxLength"
              :password="val.attr==='password'&&!showPassword"
            >
            <view class="margin-left-10">
              <get-code :code-from="part1Form.codeFrom" :phone="part1Form.phone" />
            </view>
          </view>
        </view>
      </login-container>
      <view class="margin-top-50 flex-column flex-center">
        <text class="text-24 color-t3">手机无法接收验证码？请联系平台客服</text>
        <text class="text-24 color-primary margin-top-20" @click="cell">{{ phone }}</text>
      </view>
    </view>

    <view class="item">
      <login-container title="绑定新手机" button-text="确定" :show-read="false" @submit="changePhone">
        <view class="margin-top-40">
          <view v-for="(val,key) in part2List" :key="key" :class="{'margin-bottom-16':val.attr === 'code'}" class="input-box margin-bottom-56 flex-row align-center">
            <input
              v-model="part2Form[val.attr]"
              class="text-32 color-t1 flex-item"
              placeholder-class="color-t3"
              :type="val.type"
              :placeholder="val.placeholder"
              :maxlength="val.maxLength"
            >
            <view v-if="val.attr === 'code'" class="margin-left-10">
              <get-code :code-from="part2Form.codeFrom" :phone="part2Form.phone" />
            </view>
          </view>
          <text class="text-20 color-t3">输入6-30位由字母、数字和符号两种及以上的组合密码</text>
        </view>
      </login-container>
    </view>
  </view>
</template>

<script>
import LoginContainer from '../components/login-container/login-container'
import { mapGetters } from 'vuex'
import { formVerify, cellPhone } from '@/common/util'
import { checkOldPhone, updateNewPhone, autoCompanyWithdraw } from '../api'
export default {
  name: 'SetPhone',
  components: {
    LoginContainer
  },
  data() {
    return {
      part: 1,
      part1Form: {
        phone: '',
        code: '',
        codeFrom: 'setPhone'
      },
      part2Form: {
        phone: '',
        code: '',
        codeFrom: 'changePhone',
        state: ''
      },
      part1List: [
        { attr: 'code', placeholder: '验证码', type: 'digit', maxLength: 4, must: true }
      ],
      part2List: [
        { attr: 'phone', placeholder: '手机号', type: 'digit', maxLength: 11, must: true, test: 'mobile' },
        { attr: 'code', placeholder: '验证码', type: 'digit', maxLength: 4, must: true }
      ],
      showPassword: false,
      phone: '4000000815',
      cancel: ''
    }
  },
  computed: {
    left() {
      return this.part === 1 ? 0 : '-750rpx'
    },
    ...mapGetters({
      userInfo: 'userInfo'
    })
  },
  onLoad(e) {
    this.cancel = e.cancel
    this.part1Form.phone = this.userInfo.phone
    if (this.cancel) {
      this.part1Form.withdraw = e.withdraw
      this.part1Form.codeFrom = 'withdraw'
    }
  },
  methods: {
    async changePhone() {
      if (this.part === 1) {
        if (formVerify(this.part1Form, this.part1List)) {
          let api
          if (this.cancel) {
            api = autoCompanyWithdraw
          } else {
            this.part1Form.phone = this.userInfo.phone
            api = checkOldPhone
          }

          const [err, res] = await api(this.part1Form)
          if (!this.$http.errorCheck(err, res)) return false

          if (this.cancel) {
            this.toast('注销成功', () => {
              this.login.removeLoginInfo()
              this.jump('/passport/login/login', 'reLaunch')
            })
          } else {
            this.part2Form.state = res.data.data
            this.part = 2
          }
        }
      } else {
        if (formVerify(this.part2Form, this.part2List)) {
          const [err, res] = await updateNewPhone(this.part2Form)
          if (!this.$http.errorCheck(err, res)) return false
          this.toast('绑定成功', () => {
            this.jump()
          })
        }
      }
    },
    cell() {
      cellPhone(this.phone)
    }
  }
}
</script>

<style scoped lang="scss">
@import "../login";
.container{
  @include position(fixed,0,$left:0);
  width:1500rpx;
  transition:left .2s linear;
}
.item{
  width:750rpx;
}
</style>
